<!DOCTYPE html>
<html class="" lang="en">
<head>
	<title>Hitech</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">	
		<link rel="stylesheet" type="text/css" href="css/all.min.css">				
		<link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/media.css">
		<link rel="stylesheet" type="text/css" href="css/responsive.css">
		<link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
  		<link rel="stylesheet" type="text/css" href="css/owl.theme.default.css">
	<link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
	<link rel="stylesheet" href="css/public.css" media="all">



</head>
<body>

<th:block th:include="header"/>

	<div id="login_page" class="login-page animate__animated animate__fadeInUp">


		<div class="sp_header bg-white p-3 ">
			<div class="container custom_container">	
				<div class="row ">
					<div class="col-12 ">
						<ul>
							<li class="d-inline-block font-weight-bolder"><a href="index.html" th:text="#{login.home}"></a></li>
							<li class="d-inline-block hr_ font-weight-bolder"><a href="#" th:text="#{login.topTip}"></a></li>
							<nav class="navbar ">
							<div class="dropdown right1 md_2 hr_">
						  	<span class="dropdown-toggle" role="menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><a href="#" class="font-weight-bolder" th:text="#{login.lan}">&nbsp;<i class="fas fa-angle-down"></i></a>
							</span>
								<div class="dropdown-menu r_menu dropdown-menu-right" >
									<a class="dropdown-item font-weight-bolder" href="/lan?lan=zh" th:text="#{login.chinese}"></a>
									<a class="dropdown-item font-weight-bolder" href="/lan?lan=en" th:text="#{login.English}"></a>
								</div>
							</div>
							</nav>
						</ul>

					</div>
				</div>
			</div>
		</div>

			<div class="container custom_container ">
	            <h3 class="text-center" th:text="#{login.title}"></h3>
	            <div id="login" class="page-content card card-block p-3 p-sm-4 " >

	            	<form class="layui-form" method="post" novalidate lay-filter="loginForm">
					  <div class="form-group">
					    <label for="user_email" class="font-weight-bolder" th:text="#{login.accountNumber}">&nbsp;</label>
						  <div class="layui-input-inline">
					      <input name="accountNumber" type="email" class="form-control" id="user_email" aria-describedby="emailHelp" required placeholder="账户ID/手机号" >
						  </div>
					  </div>

					  <div class="form-group font-weight-bolder" >
					    <label for="user_password" class="font-weight-bolder" th:text="#{login.password}">　&nbsp;</label>
						  <div class="layui-input-inline">
					      <input  name="password" type="password" class="form-control" id="user_password" required>
						  </div>
					  </div>

						<div class="form-group font-weight-bolder" >
							<label for="user_password" class="font-weight-bolder" th:text="#{login.captcha}"> &nbsp;</label>
							<div class="layui-input-inline">
								<input type="text" class="form-control" name="captcha" required id="code">
							</div>
							<img id="refreshCaptcha"  src="/buildCaptcha" style="width: 98px">
						</div>

					  <input type="button" name="submit"  class="btn btn-primary mb-3" th:value="#{login.login}" id="loginBtn">
					  <div class="pass_acc border-top pt-3">
						  <span class="forgot_password font-weight-bolder"><a href="forgot.html" th:text="#{login.forgetPassword}"></a></span>
						  <span class="no_account float-right font-weight-bolder"><a href="/registration/registrationPage" th:text="#{login.register}"></a></span>
					   </div>
					</form>

	            </div>
	        </div>
	</div>	<!-- login_page -->

<th:block th:include="end"/>

	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/owl.carousel.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/all.min.js"></script>
	<script src="js/index.js"></script>
	<script src="js/wow.min.js"></script>

	 <script>
        // Disable form submissions if there are invalid fields
        (function() {
          'use strict';
          window.addEventListener('load', function() {
            // Get the forms we want to add validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
              form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                  event.preventDefault();
                  event.stopPropagation();
                }
                form.classList.add('was-validated');
              }, false);
            });
          }, false);
        })();
        </script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
	layui.use([ 'form', 'table', 'layer','laytpl' ], function() {
		var $ = layui.jquery, form = layui.form, table = layui.table;
		layer = layui.layer;
		var laytpl = layui.laytpl;

		//给登录按钮绑定事件
		$("#loginBtn").on("click",function() {
			var data = form.val("loginForm");
			//先检查验证码是否正确
			$.post("/verify?code="+$("#code").val(),function (m){
				if(m.code==0){
					$.post("/login",data,function (res){//先检查-错误提示
						if (res.code==0) {//登录成功-跳转到首页面
							window.top.location.href=res.data;
						}
						//登录失败，弹出错误提示
						layer.msg(res.msg);
					});
				}else{
					layer.msg(m.msg);
				}
			});
		});

		//给验证码图片绑定事件
		$("body").on("click", "#refreshCaptcha", function () {
			this.src = "/buildCaptcha?img=" + Math.random();
		});


	});
</script>

</body>
</html>